import React,{Component} from 'react';
import Header from '../system/header/Header';
import Adaptive from '../component/adaptive/Adaptive';
import FooterMobile from '../component/footer-mobile/FooterMobile';
import { Form, Input,Radio,Button,Modal} from 'antd';
import Footer from '../component/footer/Footer';
// import checkSource from './checkBox';
// import swal from 'sweetalert';  sweetalert不支持ie11以下版本的浏览器
import Success from '../component/animate/Alert';
import './service.less';
import ajax from '../component/httprequest/Request';
import url from '../component/posturl/BaseUrl';
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const prefix = 'service';
const FormItem = Form.Item;
class Service extends Component{
    state = {
        confirmDirty: false,
        autoCompleteResult: [],
        value: 1,
        loading: false,
        iconLoading: false,
        visible: false,
        disabled:true,
        agreementVisible:false
    };
    enterLoading = () => {
        this.props.form.validateFieldsAndScroll((err, values)=>{
            if(!err){
                this.setState({ loading: true });
            }
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log(values);
                let value = JSON.stringify(values)
                let addService = `${url}/official/increase`;
                ajax.ajaxRequest(undefined,addService,value,undefined)
                    .then(res=>{
                        if(res.data.state){
                            this.setState({ loading: false },()=>{
                                this.setState({
                                    visible:true
                                },()=>{
                                    this.props.form.resetFields();
                                    let context = this;
                                    window.setTimeout(()=>{
                                        context.setState({
                                            visible:false
                                        })
                                    },2000)
                                })
                            });
                        }
                    })
                    .catch(err=>{
                        throw new Error (err);
                    })
            }
        });
    }
    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    }
    checkChange = (e) => {
        this.setState({
            disabled:e.target.checked?false:true
        })
    };
    showAgreement = () =>{
        this.setState({
            agreementVisible:true
        })
    };
    hideAgreement = () => {
        this.setState({
            agreementVisible: false,
        });
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        const {visible,loading} = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 }
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0
                },
                sm: {
                    span: 14,
                    offset: 6
                }
            }
        };
        return(
            <div className={prefix}>
                <Header refName="custom" childNodes="custom-a" imgUrl={require('./img/service.jpg')} mobileImg={require('../component/mobileBanner/banner3.jpg')}/>
                <div className={prefix+'-form'}>
                    <h3>服务申请</h3>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="姓名"
                            hasFeedback
                        >
                            {getFieldDecorator('name', {
                                rules: [{
                                    required: true, message: '请输入您的姓名',
                                }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            label="性别"
                            {...formItemLayout}
                        >
                            {getFieldDecorator('sex', {
                                rules: [{ required: true, message: '请选择性别' }],
                            })(
                                <RadioGroup onChange={this.onChange} className={prefix+'-radio'}>
                                    <Radio value={1}>男</Radio>
                                    <Radio value={2}>女</Radio>
                                </RadioGroup>
                            )}

                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="手机号"
                            hasFeedback
                        >
                            {getFieldDecorator('mobile', {
                                rules: [{
                                    pattern: /(^1\d{10}$)|(^0\d{2,3}-?\d{7,8}$)/g, message: '请输入正确的手机号',
                            },{ required: true, message: '请输入您的手机号' }],
                            })(
                                <Input style={{ width: '100%' }} />
                            )}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="邮箱"
                            hasFeedback
                        >
                            {getFieldDecorator('email', {
                                rules: [{
                                    type: 'email', message: '邮箱格式不正确',
                                }, {
                                     message: '请输入您的邮箱！',
                                }],
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem
                            label="问题描述"
                            {...formItemLayout}
                        >
                            {getFieldDecorator('problem_description', {
                            })(
                                <TextArea rows={4} />
                            )}

                        </FormItem>
                        {/*<FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}>*/}
                            {/*{getFieldDecorator('agreement', {*/}
                                {/*valuePropName: 'checked',*/}
                            {/*})(*/}
                                {/*<Checkbox*/}
                                    {/*onChange = {this.checkChange}*/}
                                {/*>我已经阅读 <a href="javascript:void(0);" onClick={this.showAgreement}>《惠每极致服务协议》</a></Checkbox>*/}
                            {/*)}*/}
                        {/*</FormItem>*/}
                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit" loading={loading} onClick={this.enterLoading}>提交</Button>
                        </FormItem>
                    </Form>
                </div>
                <Adaptive desktop={<Footer/>} phone={<FooterMobile/>} size={1200}/>
                <Modal
                    visible={visible}
                    footer = {null}
                    closable = {false}
                >
                    <div>
                        <Success/>
                        <p style={{textAlign:"center",fontSize:"24px"}}>信息提交成功</p>
                        <p style={{textAlign:"center",marginTop:"10px"}}>2s后自动关闭</p>
                    </div>
                </Modal>
                {/*<Modal*/}
                    {/*visible={agreementVisible}*/}
                    {/*title="惠每极致服务协议"*/}
                    {/*footer = {null}*/}
                    {/*onCancel={this.hideAgreement}*/}
                {/*>*/}
                    {/*<p>协议内容</p>*/}
                {/*</Modal>*/}
            </div>
        )
    }
}
const WrappedRegistrationForm = Form.create()(Service);
export default WrappedRegistrationForm;